<template>
  <div>
    <category :scence="scence"></category>
    <el-card style="margin: 10px 0">
      <!-- 场景0，展示spus已有数据 -->
      <div v-show="scence == 0">
        <el-button
          @click="addSpu"
          type="primary"
          icon="Plus"
          :disabled="categoryStore.c3Id ? true : false"
        >
          添加SPU
        </el-button>
        <!-- 向表格传递数据并展示 -->
        <el-table :data="records" border style="margin: 10px 0">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80px"
          ></el-table-column>
          <el-table-column label="SPU名称" prop="spuName"></el-table-column>
          <el-table-column
            label="SPU描述"
            prop="description"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="SPU操作">
            <template #="{ row, $index }">
              <el-button
                type="primary"
                size="small"
                icon="Plus"
                title="添加SKU"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                title="修改SPU"
                @click="updateSpu(row)"
              ></el-button>
              <el-button
                type="primary"
                size="small"
                icon="View"
                title="查看SKU列表"
                @click="findSku(row)"
              ></el-button>
              <!-- 删除的气泡确认框 -->
              <el-popconfirm
                :title="`确定删除${row.spuName}吗？`"
                @confirm="deleteSpu(row)"
              >
                <!-- 需要将button放在默认的插槽当中才会显示 -->
                <template #reference>
                  <el-button
                    type="primary"
                    size="small"
                    icon="Delete"
                    title="删除SPU"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pagesize"
          :page-sizes="[3, 5, 7, 9]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout=" prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @size-change="changeSize"
          @current-change="getHasSpu"
        />
      </div>
      <!-- 场景一：添加/修改spu -->
      <spuform
        ref="spu"
        v-show="scence == 1"
        @changeScence="changeScence"
      ></spuform>
      <!-- 场景二：添加sku -->
      <skuform
        ref="sku"
        v-show="scence == 2"
        @changeScence="changeScence"
      ></skuform>
      <el-button
        type="primary"
        size="small"
        icon="Plus"
        title="添加SKU"
        @click="addSku"
      >
        添加SKU
      </el-button>
      <!-- 添加一个对话框用来展示已有的sku -->
      <el-dialog v-model="show">
        <el-table border :data="skuArr">
          <el-table-column label="SKU名字" prop="skuName"></el-table-column>
          <el-table-column label="SKU价格" prop=" price"></el-table-column>
          <el-table-column label="SKU重量" prop="weight"></el-table-column>
          <el-table-column label="SKU图片">
            <template #="{ row, $index }">
              <img :src="row.skuDefaultImg" alt="" style="" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
import useCategoryStore from '@/store/modules/category'
import {
  reqHasSpu,
  reqRemoveSpu,
  reqSkuInfo,
  reqSpuImageList,
} from '@/api/product/spu'
import type {
  HasSpuResponseData,
  Records,
  SaleAttr,
  SkuData,
  SpuData,
} from '@/api/product/spu/type'
import skuform from './skuform.vue'
import spuform from './spuform.vue'
import { Flag } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
let categoryStore = useCategoryStore()
//当scence=1时会禁用三级菜单
let scence = ref<number>(0)
let pageNo = ref<number>(5)
let pagesize = ref<number>(5)
let total = ref<number>(100)
//存储已有的spu数据
let records = ref<Records>([])
//获取到的spu子组件实例
let spu = ref<any>()
//获取sku组件实例
let sku = ref<any>()
//存储某个spu下全部的sku商品信息
let skuArr = ref<SkuData[]>([])
//控制对话框的显示于隐藏
let show = ref<boolean>(false)
//监听三级分类id的变化就获取相应的spu数据
watch(
  () => categoryStore.c3Id,
  () => {
    getHasSpu()
  },
)
//获取某一个三级分类下的spu数据方法
const getHasSpu = async (pager = 1) => {
  //每次获取spu若没有传递pageNo则默认回到第一页
  pageNo.value = pager
  let result: any = (await reqHasSpu(
    pageNo.value,
    pagesize.value,
    categoryStore.c3Id,
  )) as unknown as HasSpuResponseData
  if (result.code === 200) {
    records.value = result.data.records
    total.value = result.data.total
  }
}
//分页器下拉菜单发生变化时触发
const changeSize = () => {
  getHasSpu()
}
//添加新的spu按钮回调,切换为场景一
function addSpu() {
  scence.value = 1
  //调用子组件中添加初始化spu的方法
  spu.value.initAddspu(categoryStore.c3Id)
}
//修改spu按钮回调，切换为场景一
function updateSpu(row: SpuData) {
  scence.value = 1
  //调用子组件实例方法
  spu.value.initHasSpuData(row)
}
//通过在子组件上绑定一个自定义事件，实现父子组件通信
function changeScence(obj: any) {
  //子组件spuform通过点击取消调用自定义事件并传递一个场景值实现切换
  scence.value = obj.flag
  //每次切换场景要重新获取已有的spu
  if (obj.params == 'update') {
    //更新留在当前页
    getHasSpu(pageNo.value)
  } else {
    //添加默认返回第一页
    getHasSpu()
  }
}
//添加sku回调
// 此处的row为spu已有的数据,包含了三级分类的id
function addSku(row: SpuData) {
  scence.value = 2
  //调用子组件中添加sku的方法
  //传递参数以便发送请求获取相应数据
  sku.value.initSKUData(categoryStore.c1Id, categoryStore.c2Id, row)
}
//查看sku方法的回调
async function findSku(row: SkuData) {
  let result: any = await reqSkuInfo(row.id as number)
  if (result.code === 200) {
    skuArr.value = result.data
    //显示对话框
    show.value = true
  }
}
//删除spu事件回调
async function deleteSpu(row: SpuData) {
  let result: any = await reqRemoveSpu(row.id as number)
  if (result.code === 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    //获取删除之后的数据,如果删除之后当前页有至少一条数据留在当前页，否则返回上一页
    getHasSpu(records.value.length > 1 ? pageNo.value : pageNo.value - 1)
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败',
    })
  }
}
//路由组件销毁前清空分类的数据数据
onBeforeUnmount(() => {
  categoryStore.$reset()
})
</script>

<style></style>
